<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <style>
        .eighth-box {
            display: flex;
            width: 100%;
            height: 100vh;
            position: absolute;
            overflow: hidden;
            background-color: #000;
        }

        .eighth-box .eb-segment {
            position: absolute;
            display: flex;
            justify-content: center;
            overflow: hidden;
            flex-direction: row-reverse;
            box-shadow: 2px 0 30px #000;
            transform: translateX(-100%);
            transition: transform 5s ease-out;
        }

        .eighth-box img {
            height: 100%;
        }

        .upper-mask,
        .bottom-mask {
            position: absolute;
            width: 100%;
            height: 500px;
            background-color: #000;
            z-index: 100;
            clip-path: ellipse(62% 30%);
            transform: translateY(-52%);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bottom-mask {
            bottom: 0;
            transform: translateY(52%)
        }

        .header {
            position: absolute;
            color: #fff;
            font-weight: bold;
            font-size: 60px;
            text-align: center;
            top: 50%;
            z-index: 200;
            text-align: center;
            left: 50%;
            transform: translate(-50%, -50%);
            text-shadow: 2px 0 2px #333;
        }

        .header .subtitle {
            margin-top: 8px;
            font-size: 30px;
            font-weight: normal;
            opacity: .6;
        }
    </style>
</head>

<body>
    <div class="eighth-box">
        <div class="eb-segment">
            <img src="./assets/paper-man/1.jpeg">
        </div>
        <div class="eb-segment">
            <img src="./assets/paper-man/2.jpeg">
        </div>
        <div class="eb-segment">
            <img src="./assets/paper-man/3.jpeg">
        </div>
        <div class="eb-segment">
            <img src="./assets/paper-man/4.jpeg">
        </div>
        <div class="eb-segment">
            <img src="./assets/paper-man/5.jpeg">
        </div>
        <div class="eb-segment">
            <img src="./assets/paper-man/6.jpeg">
        </div>

        <div class="upper-mask"></div>
        <div class="bottom-mask"></div>
        <div class="header">
            <div class="title">⌈ 奥さんを選んでください ⌋</div>
            <div class="subtitle"> Please choose your wife </div>
        </div>
    </div>

    <script type="module">
        let ebSegmentDoms = document.querySelectorAll('.eb-segment')
        let width = document.body.clientWidth;
        ebSegmentDoms.forEach((item, index) => {
            item.style.width = `${width / ebSegmentDoms.length}px`;
            item.style.zIndex = ebSegmentDoms.length - index + 1
            item.style.transform = `translateX(${~~(index * item.clientWidth)}px)`
        }) 
    </script>
</body>

</html>